<template>
    <div :class="['oneset', { border }, { 'has_switch': this.switch }, { desc }, { disable }]" v-if="!hide">
        <div class="left">
            <span>{{ left }} <BaseTips v-if="tip != ''" :isenglish="$i18n.locale == 'en-US'" :confirmText="tip"
                    ref="widthGearref"></BaseTips></span>
            <span class="desc">{{ desc }}</span>

        </div>
        <div class="right" @click="handleClick">
            <span class="right_word" v-if="right">
                {{ right }}
            </span>
            <img class="arrow" v-if="arrow" :src="arrowIcon">

        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    props: {
        left: {
            default: 'left',
            type: String
        },
        desc: {
            default: '',
            type: String
        },
        right: {
            default: '',
            type: String
        },
        tip: {
            default: '',
            type: String
        },
        arrow: {
            default: true,
            type: Boolean
        },
        border: {
            default: true,
            type: Boolean
        },
        switch: {
            default: false,
            type: Boolean
        },
        disable: {
            default: false,
            type: Boolean
        },
        hide: {
            default: false,
            type: Boolean
        }
    },
    computed: {
        ...mapGetters([
            'imgPath'
        ]),
        arrowIcon() {
            return require(`../assets/${this.imgPath}ic_jiantou.png`);
        }
    },
    methods: {
        handleClick() {
            if (this.disable) {
                return;
            }
            this.$emit('click')
        }
    }
};
</script>

<style lang="less" scoped>
@import url("../style/public.less");

.oneset {
    min-height: 4.8rem;
    margin: 0 0.4rem;
    padding: 1rem 0.8rem;
    box-sizing: border-box;
    font-size: 1.6rem;
    color: var(--emui_text_primary);
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.desc {
        min-height: 6.4rem;
    }

    &.disable {
        opacity: .4;
    }

    &:not(.has_switch) {
        .active(@radius: 1.2rem);
    }

    .left {
        flex: 1;
        margin-right: 1rem;
        display: flex;
        flex-direction: column;

        .desc {
            margin-top: 0.2rem;
            font-size: 1.4rem;
            color: var(--emui_text_secondary);
        }

        span {
            display: flex;
        }
    }

    .right {
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 1.4rem;
        color: var(--emui_text_secondary);
        width: 35%;

        .right_word {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .arrow {
            width: 1.2rem;
            height: 2.3rem;
            margin-left: 0.4rem;

            &:only-child {
                margin-left: 1.2rem;
            }
        }
    }
}

.border {
    .border(@left: 0.8rem, @right: 0.8rem);
}
</style>
